<template>
<div class="community-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">客服信息</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                 <el-form-item label="选择类型">
                    <el-radio-group  v-model.trim="formFormatData.formData.community_type" @change="typebtn">
                      <el-radio :label=1 :disabled="!!this.$route.query.id?true:false">社群</el-radio>
                      <el-radio :label=2 :disabled="!!this.$route.query.id?true:false">客服</el-radio>
                      <el-radio :label=3 :disabled="!!this.$route.query.id?true:false">公众号</el-radio>
                      <el-radio :label=4 :disabled="!!this.$route.query.id?true:false">电话</el-radio>
                    </el-radio-group>
                    <div class="form-help" style="margin-left:10px;">保存后不可再次编辑，请慎重操作</div>

                </el-form-item>
              <div v-if="formFormatData.formData.community_type=='1'">
                  <el-form-item label="社群名称" prop="title">
                    <el-input v-model.trim="formFormatData.formData.title">
                    </el-input>
                </el-form-item>
                <el-form-item label="社群描述">
                    <el-input v-model.trim="formFormatData.formData.des">
                    </el-input>
                </el-form-item>
                <el-form-item label="社群头像" prop="merchantlog" ref="merchantlog">
                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸200*200</div>
                </el-form-item>
                <el-form-item label="社群二维码" prop="businessbackgroundmap" ref="businessbackgroundmap">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸400*400</div>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model.trim="formFormatData.formData.mobile" placeholder="请输入客服联系电话">
                    </el-input>
                    <div class="form-help">不填则不显示客服电话</div>
                </el-form-item>
                <el-form-item label="小程序回复内容">
                    <el-input v-model.trim="formFormatData.formData.reply" placeholder="请输入小程序回复内容">
                    </el-input>
                    <div class="form-help">仅小程序可用，用于引导用户长按二维码识别使用</div>
                </el-form-item>
              </div>
              <div v-if="formFormatData.formData.community_type=='2'">
                  <el-form-item label="客服名称" prop="title">
                    <el-input v-model.trim="formFormatData.formData.title">
                    </el-input>
                </el-form-item>
                <el-form-item label="客服描述">
                    <el-input v-model.trim="formFormatData.formData.des">
                    </el-input>
                </el-form-item>
                <el-form-item label="客服头像" prop="merchantlog" ref="merchantlog">
                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸200*200</div>
                </el-form-item>
                <el-form-item label="客服二维码" prop="businessbackgroundmap" ref="businessbackgroundmap">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸400*400</div>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model.trim="formFormatData.formData.mobile" placeholder="请输入客服联系电话">
                    </el-input>
                    <div class="form-help">不填则不显示客服电话</div>
                </el-form-item>
                <el-form-item label="小程序回复内容">
                    <el-input v-model.trim="formFormatData.formData.reply" placeholder="请输入小程序回复内容">
                    </el-input>
                    <div class="form-help">仅小程序可用，用于引导用户长按二维码识别使用</div>
                </el-form-item>
              </div>
               <div v-if="formFormatData.formData.community_type=='3'">
                  <el-form-item label="公众号名称" prop="title">
                    <el-input v-model.trim="formFormatData.formData.title">
                    </el-input>
                </el-form-item>
                <el-form-item label="引导描述">
                    <el-input v-model.trim="formFormatData.formData.des">
                    </el-input>
                </el-form-item>
                <el-form-item label="公众号头像" prop="merchantlog" ref="merchantlog">
                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸2000*200</div>
                </el-form-item>
                <el-form-item label="公众号二维码" prop="businessbackgroundmap" ref="businessbackgroundmap">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸400*400</div>
                </el-form-item>
                 <el-form-item label="微信号" >
                    <el-input v-model.trim="formFormatData.formData.wechat">
                    </el-input>
                </el-form-item>
              </div>
               <div v-if="formFormatData.formData.community_type=='4'">
                  <el-form-item label="电话名称" >
                    <el-input v-model.trim="formFormatData.formData.title">
                    </el-input>
                </el-form-item>
                 <el-form-item label="社群描述" >
                    <el-input v-model.trim="formFormatData.formData.des">
                    </el-input>
                </el-form-item>
                 <el-form-item label="联系电话" prop="mobile">
                    <el-input v-model.trim="formFormatData.formData.mobile">
                    </el-input>
                </el-form-item>
               
              </div>
            </el-form>
        </div>
    </div>

    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/merchandise/community', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/merchandise/community">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import {
  saveServicesData,
  getServicesInfo
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'Community',
  components: {
    ChooseFiles
  },
  computed: {
  },
  directives: {

  },
  data() {
    var checkImg = (rule, value, callback) => {
      const val = this.formFormatData.formData[rule.bindKey]
      const { message } = rule
      if (!Array.isArray(val) || (Array.isArray(val) && val.length === 0)) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
        // 头像
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'headimg',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'qr_code',
          model: 'img',
          validateField: 'businessbackgroundmap'
        }
      },
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: getServicesInfo,
            params: {
              id: ''
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig']
              }
            }
          },
          submitForm: saveServicesData
        },
        formData: {
          community_type:1,
          title: '',
          headimg: [],
          qr_code: [],
          des: '',
          mobile: '',
          reply: '',
          wechat:''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入社群名称',
            trigger: 'blur'
          }],
          
          desc: [{
            required: true,
            message: '社群描述',
            trigger: 'blur'
          }],
         
          merchantlog: [{
            required: true,
            bindKey: 'headimg',
            message: '请上传社群头像~!',
            validator: checkImg,
            trigger: 'change'
          }],
          businessbackgroundmap: [{
            required: true,
            bindKey: 'qr_code',
            message: '请上传社群二维码~!',
            validator: checkImg,
            trigger: 'change'
          }]
          
        }
      }
    }
  },
  methods: {
      typebtn(){
          if(this.formFormatData.formData.community_type !='1'){
              this.formFormatData.formData.title = ''
              this.formFormatData.formData.des = ''
              this.formFormatData.formData.mobile = ''
              this.formFormatData.formData.reply = ''
              this.formFormatData.formData.wechat = ''
          }
      }
  }
}
</script>

<style lang="scss" scoped>
.community-add {}
</style>
